<template>
    <div class="h-full w-full" style="height:100%;overflow: auto;">
        <a-form
            ref="userRef"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            >
            <a-checkbox-group v-model:value="state.selectData">  
                <a-checkbox v-for="item in plainOptions" :key="item.code" :value="item.code">  
                    <span class="custom-checkbox-content">  
                        <svg-icon name="touxiang" size="18" /> 
                        {{ item.name }}  
                    </span>  
                </a-checkbox>  
            </a-checkbox-group>
        </a-form>
    </div>
  </template>
  
  <script setup lang="tsx">
    import { ref, reactive, onMounted, watch } from 'vue';
    import type { TreeDataItem } from '@/core/permission/utils';
    
    import {
        getGroupPage
    } from '@/api/organization/groups/groups';

    interface Props {
      defaultData?: any;
    }
    const props = withDefaults(defineProps<Props>(), {
      defaultData: [{
        defaultSelectData: [],
      }]
    });
    defineOptions({
      name: 'settingGroup',
    });
  
    interface State {
      expandedKeys: number[];
      departmentIds: number[];
      originData: any;
      deptTree: TreeDataItem[];
    }
  
  const emit = defineEmits(['updateValue']);  
  
    const updateParentValue = (newVal) => {  
      const parentValue=newVal.map((item) => {
        const index = plainOptions.value.findIndex(option => option.code ===item);
        if(index>=0){
          const selectOption=plainOptions.value[index];
          return {
                NO:selectOption.code,
                NAME:selectOption.name,
                ORG_TYPE:'group'
            }; 
        }
      });
      if(parentValue.length<=0){
        const blankData={
                NO:"none",
                NAME:"",
                ORG_TYPE:'group'
            }; 
            parentValue.push(blankData);
      }
      emit('updateValue', parentValue);  
    };  
    const state = reactive<State>({
      parentId: [],
      selectData: [],
      departmentIds: [],
      deptTree: [],
      originData: [],
    });
    const plainOptions=ref<any>([]);

    
    const loadTableData = async () => {
      const data = await getGroupPage({
        orgId: '',
      });
      if(props.defaultData.defaultSelectData.length>0){
        props.defaultData.defaultSelectData.map((item)=>{
            state.selectData.push(item.NO);
        })
      }
      plainOptions.value=data?.rows || [];
    };

    const onSubMit = async () => {
      return state.selectData;
    };
    const updateSelectData=async(newData)=>{
      state.selectData=newData;
    }
    defineExpose({
      handleSubmit: onSubMit,
      handlerUpdate: updateSelectData,
    });
    onMounted(() => {
        loadTableData();
    });
    watch(
        () => state.selectData,
        (newVal) => {
            updateParentValue(newVal);
        },
  );
  </script>
  
  <style lang="less" scoped>
  @import '@/styles/navTheme.less';
  @classBacks: user-page-box;
  .customSetStyle(@classBacks, background-color, 'content-back-user');
  
  :deep(.ant-tree) {
    flex: 1;
  }
  
  .testtitle {
    width: 100%;
    overflow: hidden;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .testitem {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 150px;
    align-items: center;
  }
  </style>
  